<template>
  <div
    class="card-carousel-multi-row"
    ref="parent"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="card-carousel__wrapper container-content">
      <client-only v-if="modelValue?.data?.length">
        <swiper
          ref="swiperRef"
          :modules="modules"
          :centered-slides="false"
          :speed="600"
          :slides-per-view="1"
          :slides-per-group="1"
          :space-between="16"
          :loop="true"
          :breakpoints="breakpoints"
          class="swiper card-carousel__swiper"
          @swiper="onSwiper"
          @slideChange="onSwiperSlideChange"
        >
          <swiper-slide
            v-for="(slide, slideIdx) in listChunck"
            :key="slideIdx"
            class="swiper-slide"
          >
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
              <div
                class="slide-content col"
                v-for="(item, itemIdx) in slide"
                :key="'item-' + itemIdx"
                @click="handleClick(item)"
              >
                <div class="card-profile">
                  <div class="profile__head">
                    <div class="profile__img img-fit --show-profile">
                      <img :src="item.imgSrc" :alt="item.alt" />
                      <div class="profile__img__mask">
                        <div class="profile__img__mask__btn">简介</div>
                      </div>
                    </div>
                  </div>
                  <div class="profile__body text-center --show-profile">
                    <div class="profile__title tx-subtitle mt-3 mt-md-4">
                      {{ item.title }}
                    </div>
                    <h6 class="profile__name tx-h6 mt-md-1">
                      {{ item.name }}
                    </h6>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="mt-10 mt-md-12">
          <SlidesPagination
            :currentIndex="currentIndex"
            :count="listChunck.length"
            @updatePage="updatePage"
            dark
          ></SlidesPagination>
        </div>
      </client-only>
    </div>

    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
  <ProfileModel v-model:show="showProfile" :data="profileData"></ProfileModel>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";
import ProfileModel from "@/common/Profile/modal.vue";
import SlidesPagination from "@/common/SlidesPagination/index.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
// 导入 Swiper 样式
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

// 定义组件名称
defineOptions({
  name: "CardCarouselMultiRow",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["update:modelValue", "handleDelete", "handleCopy", "handlePaste"]);

// Swiper 模块
const modules = [Navigation, Pagination, Autoplay];

// Swiper 断点配置
const breakpoints = {
  768: {
    slidesPerView: "auto" as const,
    slidesPerGroup: 1,
    slidesPerGroupAuto: true,
    spaceBetween: 16,
  },
  1024: {
    slidesPerView: 1,
    slidesPerGroup: 1,
    spaceBetween: 16,
  },
};

const currentIndex = ref(0);
const listChunck = ref<any[]>([]);
const swiperInstance = ref<any>(null);

// 获取 Swiper 实例
const onSwiper = (swiper: any) => {
  swiperInstance.value = swiper;
};

const onSwiperSlideChange = (swiper: any) => {
  currentIndex.value = swiper.realIndex;
};
const row = computed(() => {
  return props.modelValue?.row ?? 2;
});
const perChunk = computed(() => {
  const width = (typeof window === 'undefined' ? 1024 : window.innerWidth);
  return (width >= 768 ? (width >= 1024 ? 4 : 3) : 3) * row.value;
});
const listChuncked = () => {
  console.log("listChuncked", props.modelValue?.data);
  const result = props.modelValue?.data?.reduce(
    (resultArray: any[], item: any, index: number) => {
      const chunkIndex = Math.floor(index / perChunk.value); // 8/8
      if (!resultArray[chunkIndex]) resultArray[chunkIndex] = [];
      resultArray[chunkIndex].push(item);
      return resultArray;
    },
    []
  );
  console.log("listChunck", result);
  listChunck.value = result;
};

const swiperRef = ref<any>(null);
// 分页控制函数 - 使用 Swiper 实例
const updatePage = (idx: number) => {
  if (swiperInstance.value) {
    swiperInstance.value.slideToLoop(idx, 600);
  }
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.data && props.modelValue.data.length) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "CardCarouselMultiRow",
    rows: 2,
    data: [
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
      {
        id: randomString(),
        logo: "https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png",
        title: "耀华国际教育",
        subTitle: "耀华国际教育学校浙江桐乡",
        name: "耀华国际",
        label: "123",
        imgSrc:
          "https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg",
        alt: "",
        buttonList: {
          id: randomString(),
          type: "BtnList",
          readOnly: true,
          width: "",
          bgColor: "",
          data: [
            {
              id: randomString(),
              type: "white",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
            {
              id: randomString(),
              type: "light",
              text: "了解更多",
              url: "https://www.baidu.com",
              isExternal: false,
            },
          ],
        },
        paragraphs: [
          {
            id: randomString(),
            title: "123",
            content: "123",
          },
        ],
      },
    ],
  };
  emit("update:modelValue", data);
};

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

const showProfile = ref<boolean>(false);
const profileData = ref<any>({});
const handleClick = (item: any) => {
  profileData.value = item;
  showProfile.value = true;
};

handleInit();
nextTick(() => {
  listChuncked();
});
</script>

<style lang="scss" scoped>
.card-carousel-multi-row {
  position: relative;
}

@media (max-width: 767.98px) {
  .card-carousel__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Migrated minimal utilities from global.scss for this component */
.card-carousel-multi-row {
  .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)*-1);
    margin-right: calc(var(--bs-gutter-x)*-0.5);
    margin-left: calc(var(--bs-gutter-x)*-0.5)
  }

  .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)*0.5);
    padding-left: calc(var(--bs-gutter-x)*0.5);
    margin-top: var(--bs-gutter-y)
  }

  .col {
    flex: 1 0 0%
  }

  .row-cols-1>* {
    flex: 0 0 auto;
    width: 50%
  }

  .row-cols-md-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%
  }

  .row-cols-lg-4>* {
    flex: 0 0 auto;
    width: 25%
  }

  .justify-content-center {
    justify-content: center;
  }

  .img-fit {
    width: 100%;
  }

  .img-fit .img,.img-fit img {
    width: 100%;
    height: auto;
  }

  .img-wrapper {
    position: relative;
    height: 0;
    width: 100%
  }

  .mt-10 { margin-top: 40px; }
  @media(min-width: 768px) {
    .mt-md-12 { margin-top: 48px; }
  }
}

.card-carousel__wrapper .swiper .swiper-slide {
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .card-carousel__wrapper .swiper .swiper-slide {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.card-carousel-multi-row .row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 32px;
}

@media (max-width: 767.98px) {
  .card-carousel-multi-row .row {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 28px;
  }
}

.card-carousel__wrapper .swiper .swiper-slide .slide-content {
  pointer-events: auto;
}

.card-carousel .row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 80px;
}

@media (max-width: 767.98px) {
  .card-carousel .row {
    --bs-gutter-y: 40px;
  }
}

.card-carousel__title {
  color: #0032a0;
  margin-bottom: 24px;
}

@media (max-width: 767.98px) {
  .card-carousel__title {
    margin-bottom: 12px;
  }
}

.card-profile .profile__head {
  position: relative;
}

.card-profile .profile__head .profile__img {
  overflow: hidden;
}

.card-profile .profile__head .profile__img.--show-profile {
  cursor: pointer;
}

@media (min-width: 768px) {
  .card-profile
    .profile__head
    .profile__img.--show-profile:hover
    .profile__img__mask {
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1;
  }
}

.card-profile .profile__head .profile__img__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.25s ease-out;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-profile .profile__head .profile__img__mask__btn {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  color: #f7f7fa;
  padding: 6px 10px;
  min-width: 140px;
  border: 1px solid #f7f7fa;
  border-radius: 2px;
}

@media (max-width: 1023.98px) {
  .card-profile .profile__head .profile__img__mask__btn {
    line-height: 1.25;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767.98px) {
  .card-profile .profile__head .profile__img__mask__btn {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.02em;
    min-width: 100px;
  }
}

.card-profile .profile__body {
  text-decoration: none;
  padding-bottom: 12px;
}

@media (max-width: 767.98px) {
  .card-profile .profile__body.is-single-column {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.card-profile .profile__body.--show-profile {
  cursor: pointer;
}

.card-profile .profile__body .profile__title {
  color: #0048e8;
  color: var(--primary-color, #0048e8);
}

.card-profile .profile__body .profile__name {
  color: #0032a0;
  color: var(--text-color--secondary, #0032a0);
}
</style>
